<template>
	<!-- 提交订单组件 -->
	<view class="navigation">
		<view class="left">
			<view class="item">
				<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">客服</view>
			</view>
			<!-- 未收藏 -->
			<view class="item" v-if="collectStatus===0" @tap="collectBook()">
				<u-icon name="star" :size="40"></u-icon>
				<view class="text u-line-1">收藏</view>
			</view>
			<!-- 已收藏 -->
			<view class="item" v-if="collectStatus!==0" @click="collectBook()">
				<u-icon name="star-fill" :size="40" class="icon-style"></u-icon>
				<view class="text u-line-1 icon-style">已收藏</view>
			</view>
			<view class="item car" @tap="routeCar()">
				<u-badge class="car-num" :count="carNum" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">购物车</view>
			</view>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" @tap="addShoppingCar()" >加入购物车</view>
			<!-- <view class="cart btn u-line-1" display>已加入购物车</view> -->
			<view class="buy btn u-line-1" @tap="orderPrivce()">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["bookId","carNum"],
		data() {
			return {
				// 设置收藏与已收藏的状态,0为未收藏，1为已收藏
				collectStatus: 0,
				booksId: '',
				// 购物车中商品的数量
				count:0
				
			}
		},
		methods: {
			collectBook() {
				// 判读收藏图标的初始状态,若为0,点击加收藏,若为1,点击取消收藏
				if (this.collectStatus === 0) {
					// 判断用户是否有登陆,有登陆则添加成功,没有登陆则强制用户跳转到登陆界面
					const token = this.vuex_token
					if (!token) {
						const currentPage=getCurrentPages().pop();
						console.log(currentPage.route)
						// 缓存当前路径
						uni.setStorageSync('back_url',currentPage.route) 
						uni.showModal({
							title: '请先登陆!!!!',
							success: function(res) {
								if (res.confirm == true) {
									console.log(111)
									// 点击确认跳转到登陆界面
									uni.$u.route({
										type: 'redirect',
										// url: '/page/auth/loginIn',
										url: 'pages/auth/loginIn'
									})
									// 点击取消则跳转到首页
								} else if (res.cancel) {
									// console.log('用户点击取消');
									uni.$u.switchTab({
										type: 'switchTab',
										// url: '/page/auth/loginIn',
										url: 'pages/index/index'
									})
								}
							}
						});
					} else {
						// 若有登陆状态,根据传过来的id对收藏状态的判断，若用户已经收藏过，对应图标应该为已收藏
						this.collectStatus = 1;
						this.$u.toast('收藏成功')
						this.getStatus()
						
					}

				} else {
					this.collectStatus = 0;
					this.$u.toast('取消收藏')
					this.getStatus()
				}
			},
			// 收藏与取消收藏接口api
			async getStatus() {
				// this.booksId = 1
				await this.$u.post('/api/collects/goods/' + this.bookId).then(res => {
					console.log(res.data)
				}).catch(err => {
					console.log(err)
				})
			},
			status(){
				for(var i=0;i<this.bookIds.length;i++){
					if(this.bookId===this.bookIds[i]){
						this.collectStatus=1
					}else{
						this.collectStatus=0
					}
				}
			},
			getBookIds(res){
			this.bookIds=res.map(item=>{
					return item.goods_id;
				})
				console.log(this.bookIds)
				// uni.setStorageSync('bookIds',this.bookIds)
			},
			// 添加购物车
		    async addShoppingCar(){
				const token=this.vuex_token;
				if(!token){
					console.log(currentPage)
					const currentPage=getCurrentPages().pop();
					console.log(currentPage.route)
					// 缓存当前路径
					uni.setStorageSync('back_url',currentPage.route) 
					uni.showModal({
					    title: '请先登陆！！！',
					    success: function (res) {
					        if (res.confirm) {
					            uni.$u.route({
					            	type:'redirect',
					            	// url: '/page/auth/loginIn',
					            	url: 'pages/auth/loginIn'
					            })
					        } else if (res.cancel) {
					        }
					    }
					});
				}else{
					
					const params={
						goods_id:this.bookId
					}
					await this.$u.post('/api/carts',params).then(res=>{
						console.log(res);
						this.carNum++;
						uni.showToast({
							title:'添加成功',
							icon:'success'
						})
					}).catch(err=>{
						console.log(err)
					})
				}
				
			},
			routeCar(){
				const token =this.vuex_token;
				if(!token){
					const currentPage=getCurrentPages().pop();
					console.log(currentPage.route)
					// 缓存当前路径
					uni.setStorageSync('back_url',currentPage.route) 
					uni.showModal({
					    title: '请先登陆！！！',
						showCancel:false,
					    success: function (res) {
					        if (res.confirm) {
					           uni.navigateTo({
					           	url:'/pages/auth/loginIn'
					           })
					        } 
					    }
					});
					
				}else{
					uni.reLaunch({
					    url: '/pages/shoppingCar/shoppingCar'
					});
				}
			},
			orderPrivce(){
				uni.navigateTo({
					url:'/pages/order-preview/order-preview'
				}),
				// 将bookID传递给订单预览界面
				uni.$on('sendId',res=>{
					uni.$emit('bookId',this.bookId)
				})
			}
		},
	    async mounted() {
			// 判断用户是否处于登录状态
			const token=this.vuex_token
			// 没有登录状态则所有的收藏图标设置为0,且购物车徽标为0
			if(!token){
				this.collectStatus=0;
				this.carNum=0
			}else{
				// 处于登录状态则根据用户收藏的接口返回值判断收藏图标的状态
				await this.$u.get('/api/collects').then(res => {
					console.log(res)
					this.getBookIds(res.data.data);
					this.status()
				}).catch(err => {
					console.log(err)
				})
				
			}
			
		},
	    
	    
	};
</script>

<style lang="scss" scoped>
	.item {
		text-align: center;
	}

	.icon-style {
		color: #ff9900;
	}

	.navigation {
		display: flex;
		// margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 20rpx 0 20rpx 0 !important;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}

	.submitBar {
		padding: 10px 0 10px 0 !important;
	}
</style>
